<script setup lang="ts">
import { computed } from "vue";
import { timeTrans } from "../../../utils";

type Prop = {
  class?: string;
  titleClass?: string;
  contentClass?: string;
  label?: string;
  content?: any;
  style?: any;
  vertical?: boolean;
  dateFormat?: string;
  flex?: boolean;
};

const props = withDefaults(defineProps<Prop>(), {
  flex: true
});

const style = computed(() => {
  return {
    ...(props.style || {}),
    flexDirection: props.vertical ? "column" : "row"
  };
});

const genContent = computed(() => {
  if (props.dateFormat && props.dateFormat.length > 0) {
    return timeTrans(props.content, props.dateFormat);
  }
  return props.content;
});
</script>

<template>
  <div :class="[props.class, 'description-row']" :style="style as any">
    <div
      :class="[
        titleClass,
        'description-label',
        props.vertical ? '' : ' label-row'
      ]"
    >
      <slot name="label">
        {{ label }}
      </slot>
    </div>
    <div
      :class="[
        contentClass,
        'description-value',
        props.vertical ? '' : ' value-row',
        flex ? 'w-full' : 'w-1/2'
      ]"
    >
      <slot name="default" :scope="{}">
        {{ genContent }}
      </slot>
    </div>
  </div>
</template>
<style lang="scss">
$desc-label-width: 40%;
$desc-content-width: 100%;

.description-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  align-items: start;
  padding: 5px 10px;
  border-bottom: 1px solid var(--el-bg-color);
}
.description-label {
  width: 100%;
  font-size: var(--el-font-size-base);
}

.label-row {
  width: 40%; // var(desc-label-width);
}

.description-value {
  width: 100%; // var(desc-content-width);
  padding-left: 10px;
  font-size: 14px;
  flex: 1;
}
.value-row {
  border-left: 1px solid var(--el-bg-color);
}
</style>
